<template>
  <div id="operationlog">
    <div class="operationlog">
      <div class="operation_header">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item label="运单号">
            <el-input
              v-model="query.waybill_no"
              placeholder="请输入运单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作人">
            <el-select
              v-model="query.operate_user_id"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in chargeData"
                :label="item.name"
                :value="item.id * 1"
                :key="item.id"
                >{{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="操作内容">
            <el-input
              type="textarea"
              :rows="1"
              v-model="query.operate_content"
              placeholder="请输入操作内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              style="width: 250px"
              v-model="create_time_list"
              type="datetimerange"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              value-format="timestamp"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              data-tracker="P50-1"
              icon="el-icon-search"
              @click="searchSenderCheckList"
              >查询</el-button
            >
            <el-button
              plain
              icon="el-icon-refresh-left"
              data-tracker="P50-2"
              @click="resettingData"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="operation_table">
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :max-height="maxheight"
        >
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column prop="waybill_no" label="运单号" width="180">
          </el-table-column>
          <el-table-column prop="operate_user_name" label="用户" width="180">
          </el-table-column>
          <el-table-column prop="operate_source" label="操作来源" width="180">
          </el-table-column>
          <el-table-column prop="operate_time" label="操作时间">
          </el-table-column>
          <el-table-column prop="operate_content" label="操作内容">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
        </el-table>
      </div>
      <div class="operation_page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="alltotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { searchChargeData } from "@/api/waybill";
import { operateList } from "@/api/message";
import { timestamp10 } from "@/utils/mUtils";
export default {
  name: "operationlog",

  data() {
    return {
      maxheight: "auto",
      query: {
        page: 1,
        page_size: 20,
        operate_user_id: "", // 操作人id
        waybill_id: 0, // 运单id
        waybill_no: "", // 操作类型名称
        operate_content: "", // 操作内容
        create_time: {
          start_time: "",
          end_time: "",
        },
      },
      create_time_list: [], //时间
      tableData: [],
      chargeData: [],
      alltotal: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  mounted() {
    // 操作人
    this.remoteMethod();
    // 列表接口
    this.operateListObj();
  },
  methods: {
    remoteMethod() {
      var param = {};
      searchChargeData().then((res) => {
        this.chargeData = res.data;
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.query.page_size = val;
      this.operateListObj();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.query.page = val;
      this.operateListObj();
    },
    operateListObj() {
      var param = {
        ...this.query,
        operate_user_id:
          this.query.operate_user_id == "" ? 0 : this.query.operate_user_id,
        create_time:
          this.create_time_list.length == 0
            ? {
                start_time: "",
                end_time: "",
              }
            : {
                start_time: timestamp10(this.create_time_list[0]) + "",
                end_time: timestamp10(this.create_time_list[1]) + "",
              },
      };
      operateList(param).then((res) => {
        this.tableData = res.data.list;
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 245;
        } else {
          this.maxheight = "auto";
        }
        this.alltotal = res.data.total;
      });
    },
    searchSenderCheckList() {
      this.query.page_size = 20;
      this.query.page = 1;
      this.operateListObj();
    },
    resettingData() {
      this.create_time_list = [];
      Object.assign(this.$data.query, this.$options.data().query);
      this.operateListObj();
    },
  },
};
</script>
<style scoped lang='scss'>
.operation_header .el-form-item--mini.el-form-item {
  margin-bottom: 10px;
}

.operationlog {
  padding: 10px 15px;
  background: #fff;
}

.operation_page {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0px 0px 0px;
}
</style>